<!DOCTYPE html>
<html lang="en">
<!--
一、	要求实现效果（见图7）：
1.	点击“动态生成列表项”按钮，文本框中的内容添加到页面上方的无序列表中；
2.	文本框中的值添加到无序列表之后，文本框置空。
-->

<!--
2.2． 操作步骤描述
1.	为按钮“动态生成列表项”绑定点击事件
2.	编写方法，实现效果
2.1	获取文本框元素
2.2	创建文本节点及元素。将文本节点添加到li元素中
2.3	把li元素节点添加到ul无序列表
2.4	将文本框置空 value=””
-->

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        function addname() {
            let value = document.getElementById("wenbenkuang").value;

            let li = document.createElement("li");
            li.innerText=value;
            let ul = document.getElementById("cname");
            ul.appendChild(li);
            document.getElementById("wenbenkuang").value='';
        }
    </script>
</head>
<body>
<ul id="cname">
    <li>传智博客</li>
    <li>黑马程序员</li>
    <li>博学谷</li>
</ul>
<input type="text" id="wenbenkuang">
<input type="button" value="动态生成列表项" onclick="addname()">
</body>
</html>